import { Toast ,Button} from "antd-mobile";
import React, { Component } from "react";
import Header from "../../components/Header/Header";
import { reqregister } from "../../http/api";
export default class Register extends Component {
  constructor() {
    super();
    this.state = {
      user: {
        phone: "",
        nickname: "",
        password: "",
      },
    };
  }
  changeregs(e,key){
    this.setState({
   user:{
    ...this.state.user,
    [key]:e.target.value
   }
    })
  }
  async regste(){
      let res=await reqregister(this.state.user);
      if(res.data.code==200){
        Toast.show({
          content:res.data.msg
        })
          this.props.history.push("/login")
      }
  }
  componentDidMount() {}

  render() {
    let {user}=this.state
    return (
      <div>
        <Header back title="注册" {...this.props}></Header>
        <div>{JSON.stringify(user)}</div>
        <div>
          手机号{" "}
          <input
            type="text"
            placeholder="请输入手机号"
            onChange={(e) => {
              this.changeregs(e, "phone");
            }}
          />
        </div>
        <div>
        账号{" "}
          <input
            type="text"
            placeholder="请输入账号"
            onChange={(e) => {
              this.changeregs(e, "nickname");
            }}
          />
        </div>
        <div>
        密码{" "}
          <input
            type="text"
            placeholder="请输入密码"
            onChange={(e) => {
              this.changeregs(e, "password");
            }}
          />
        </div>
        <Button  onClick={()=>this.regste()}>注册</Button>
      </div>
    );
  }
}
